{% extends "WebConsole/base.html" %}

{% block content %}
<div id="err">{{err}}</div>
<input name="ws_url" type="hidden" id="ws_url" value="{{ ws_url }}">
<div id="show-area" style="float: left;width:140%;max-height: 100%;overflow-x: auto;">
{% for comp in KBEComps %}
{% if comp.componentType == child_type %}
<div class="div-status" style="float: left;width:500px;min-height:400px;margin-left: 1em;margin-top: 1em;display:inline">
  <div id="{{ comp.fullname }}-chart" style="width: 100%;height: 350px;"></div>
  <div style="text-align: center">{{ comp.fullname }}</div>
</div>
  {% endif %}
{% endfor %}
</div>
{% endblock %}

{% block tail_js %}
<script>$(".condition-cp").addClass("active");</script>
<script>
  $(".kbe-list .dd").hide();
  $(".kbe-list .condition .dd").show();
  $(".kbe-list .condition").css({"background-color":"#317eb4"});
  $(".kbe-list .condition").find('li').addClass("menu_chioce");

 $(document).ready(function(){
  var page_height = $(document).height();
  $("#show-area").height(page_height);
 })
window.onload = connect_to;

function connect_to()
{ {% for comp in KBEComps %}{% if comp.componentType == child_type %}
      var {{comp.fullname}}_arr_x = new Array();
      var {{comp.fullname}}_start_num = 0;
      var {{comp.fullname}}_end_num = 100;
      var {{comp.fullname}}_myChart = echarts.init(document.getElementById('{{comp.fullname}}-chart'));
  {% endif %}{% endfor %}
  cp_arr = { {% for comp in KBEComps %}{% if comp.componentType == child_type %} {{ comp.componentID }}:new Array(),{% endif %}{% endfor %}}
  
  var socket = new WebSocket($("#ws_url").val());
  socket.onopen = function(evt)
  { 
  
    {% for comp in KBEComps %}
    {% if comp.componentType == child_type %}
    var {{comp.fullname}}_myChart = echarts.init(document.getElementById('{{comp.fullname}}-chart'));
    var {{ comp.fullname }}_option = {
      tooltip : {
          trigger: 'axis'
      },
    dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          zoomLock:true,
          realtime:true
        }
    ],
      grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : []
          }
      ],
      yAxis : [
        {
          scale: true,
            splitArea: {
                show: true
            }
        }
      ],
      series : [{
        name:'{{ comp.fullname }}[{{ comp.componentID }}]',
        type:'line',
        smooth: true,
        data:[]
        },
      ]
    };

    {{comp.fullname}}_myChart.setOption({{ comp.fullname }}_option);
      
      //实时获取dataZoom的状态
    {{comp.fullname}}_myChart.on("dataZoom",function(params){
      {{comp.fullname}}_start_num = params.start;
      {{comp.fullname}}_end_num = params.end;
    })

    timeTicket = setInterval(function {{ comp.fullname }}() {
      if (arr_x.length > 50)
          {{comp.fullname}}_start_num = {{comp.fullname}}_end_num - (50/arr_x.length)*100;
   
      {{comp.fullname}}_myChart.setOption({
        dataZoom : [{
         start:{{comp.fullname}}_start_num,
         end:{{comp.fullname}}_end_num,
        }],
          // xAxis : [{
          //   data : arr_x
          // }],
        series: [
        {
          name:'{{ comp.fullname }}[{{ comp.componentID }}]',
          data:cp_arr[{{ comp.componentID }}]
         },
        ]
      });
      }, 500);
    {% endif %}
    {% endfor %} 
    };
   
    socket.onclose = function(evt) { }; 
    socket.onmessage = function(evt) {
      
      data = JSON.parse(evt.data.replace(/'/g,'\"'));
      console.log(data);
      for (var i = 0; i < data["componentID"].length; i++) {
        cp_arr[data["componentID"][i]].push(data["load"][i])
        arr_x = cp_arr[data["componentID"][i]]
     }
   }
      socket.onerror = function(evt) { }; 
       window.socket = socket;
}
</script>
    
{% endblock %}
